import React, { Component } from 'react'


//  引入 axios  from 'axios'

import axios from 'axios'

//  引入 弹性布局  




import Swiper from './Swiper'
import "./index.scss"

//  
// const PlaceHolder = ({ className = '', ...restProps }) => (
//     <div className={`${className} placeholder`} {...restProps}>Block</div>
// );

// react 里面   使用图片 我们需要采用这样的方式 

import NavImg1 from '../../assets/images/nav-1.png'

import NavImg2 from '../../assets/images/nav-2.png'

import NavImg3 from '../../assets/images/nav-3.png'

import NavImg4 from '../../assets/images/nav-4.png'
import Search from './Search';




import { Flex, WhiteSpace, List, Grid } from 'antd-mobile';
// import { List } from 'antd-mobile';

// import { Grid } from 'antd-mobile';

const Item = List.Item;
const Brief = Item.Brief;




const data1 = Array.from(new Array(4)).map(() => ({
    icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
}));


// http://e.ludir.cn:8081/home/groups?area=上海

let NavList = [

    {
        img: NavImg1,
        title: '整租',
        path: '/home/list'
    },
    {
        img: NavImg2,
        title: '合租',
        path: '/home/list'
    }
    , {
        img: NavImg3,
        title: '地图找房',
        path: '/map'
    }
    , {
        img: NavImg4,
        title: '去出租',
        path: '/aaa'
    }



]


// 当组件使用
// const NavContent = (props) => {
//     console.log(props)
//     return (
//         <div>
//             <img src={props.item.img} alt="" />
//             <h3> {props.item.title}</h3>
//         </div>
//     )
// }


//  当函数使用
const NavContent = (item) => {
    // console.log(item)
    return (
        <div>
            <img src={item.img} alt="" />
            <h3> {item.title}</h3>
        </div>
    )
}





//获取地理位置  （h5  ip定位  ip 定位只能定位到城市）

// h5 定位

// 浏览器定位
// const BMapGL=window.BMapGL
// var map = new BMapGL.Map("allmap");
//         // var point = new BMapGL.Point(116.331398,39.897445);


//         var geolocation = new BMapGL.Geolocation();
//         geolocation.getCurrentPosition(function(r){
//             console.log('您的位置：'+r);

//         });




// ip定位 









// var myCity = new BMapGL.LocalCity();
//     myCity.get(res=>{
//         console.log('当前地址',res)
//     }); 

// const curCity = new window.BMap.LocalCity()
//     curCity.get(async res => {
//       console.log('当前城市信息：', res)
//     //   const result = await axios.get(
//     //     `http://localhost:8080/area/info?name=${res.name}`
//     //   )
//       // console.log(result)

//     })









const BMapGL = window.BMapGL //  第一个 需要把BMapGL 挂载在window 下面



export default class Homeindex extends Component {


    state = {
        news: [], // 最新资讯
        groups: [],// 找房小组
        curCity: '' //当前城市信息
    }

    /**
     * 
     * @returns 
     * 
     * 
     *  renderNavItems() {
        return (
            NavList.map(item => {
                return (<Flex.Item>

                    <div>
                        <img src={item.img} alt="" />
                        <h3> {item.title}</h3>
                    </div>
                </Flex.Item>
                )
            })



        )
    }
     */

    renderNavItems() {
        return (
            NavList.map(item => {
                return (<Flex.Item
                    onClick={() => this.props.history.push(item.path)}

                >
                    {/* 方式二 */}
                    {/* <NavContent item={item}></NavContent> */}
                    {/*  方式三 */}
                    {NavContent(item)}
                </Flex.Item>
                )
            })



        )
    }



    // {
    //     "id": 1,
    //     "title": "家住回龙观",
    //     "desc": "归属的感觉",
    //     "imgSrc": "/img/groups/1.png"
    //   },
    renderGroups() {
        let { groups } = this.state

        return (

            <Grid data={groups}
                columnNum={2}
                renderItem={dataItem => (
                    <div style={{ padding: '12.5px' }}>
                        <img src={`http://e.ludir.cn:8081${dataItem.imgSrc}`} style={{ width: '75px', height: '75px' }} alt="" />
                        <div style={{ color: '#888', fontSize: '14px', marginTop: '12px' }}>
                            <span>{dataItem.title}</span>
                            <p> {dataItem.desc}</p>
                        </div>
                    </div>
                )}
            />




        )
    }

    // 获取租房小组数据的方法
    async getGruops() {
        let areaId='AREA|dbf46d32-7e76-1196' // 上海, 北京 ,深圳
      
        let url = `http://e.ludir.cn:8081/home/groups?area=${areaId}`
        let groups = await axios.get(url)

        console.log('groups',groups)
        this.setState({
            groups: groups.data.body
        })

    }

    // 获取最新资讯

    async getNews() {


        let url = 'http://e.ludir.cn:8081/home/groups?area=AREA%7C88cff55c-aaa4-e2e0'
        let news = await axios.get(url)

        // console.log(news)
        this.setState({
            news: news.data.body
        })

    }


    // ① 打开百度地图JS API 定位文档 。
    // ② 通过 IP 定位获取到当前城市名称。
    // ③ 调用我们服务器的接口，换取项目中的城市信息（有房源的城市的名称和id）。
    // ④ 将接口返回的城市信息展示在顶部导航栏中。
    


    //获取当前位置以及城市信息 
    getCurCity() {
       
        var myCity = new BMapGL.LocalCity();
        myCity.get(async res => {
            console.log("当前定位城市:", res.name);

            let cityName = res.name


            let url = `http://e.ludir.cn:8081/area/info?name=${cityName}`
            let result = await axios.get(url)


            console.log('resust', result)

            this.setState({
                curCity:result.data.body.label
            })




        })

    }



    componentDidMount() {
        this.getGruops()
        this.getNews()
        this.getCurCity()
    }

    // componentDidUpdate(preState,preProps) {
    //  if(   preState.curCity !==   this.state.curCity) { // 如果不相等必然发生了 城市位置变化
    //     this.getGruops()

    //  }

    // }






    render() {
        let {curCity} =this.state
        return (
            <div>
                Home index 页面 后期需要删掉
                <Search  curCity={curCity}></Search>

                <Swiper></Swiper>
                {/* 分类导航 */}
                <Flex className='flexNav'>
                    {/* <Flex.Item><NavContent /></Flex.Item> */}
                    {this.renderNavItems()}
                </Flex>

                {/* 租房小组  采用antd-mobile 的grid */}

                <div>
                    <div className='groupTitle'>
                        <span>租房小组</span>
                        <span>更多</span>
                    </div>
                    {this.renderGroups()}









                    {/*  用于最新资讯 */}
                    {/* 
                    <List>
                        <Item
                            arrow="horizontal"
                            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                            multipleLine
                            onClick={() => { }}
                        >
                            Title <Brief>subtitle</Brief>
                        </Item>
                    </List> */}
                </div>


                {/* 最新资讯 */}
            </div>

        )
    }
}
